import React from 'react'
import ReactDOM from 'react-dom'

// 1. 时钟案例
// function formatDate(props) {
//   const element = (
//     <div>
//       <h1>hello word</h1>
//       <h1>it is {new Date().toLocaleTimeString()}</h1>
//     </div>
//   );
//   ReactDOM.render(
//     element,
//     document.getElementById('root')
//   );
// };
// setInterval(formatDate, 1000);

// 2. 简单优化时钟案例
// function Clock(props) {
//   return (
//     <div>
//       <h1>hello word</h1>
//       <h1>it is { props.date.toLocaleTimeString()}</h1>
//     </div>
//   )
// };

// function formatDate() {
//   ReactDOM.render(
//     <Clock date={new Date()} />,
//     document.getElementById('root')
//   );
// };
// setInterval(formatDate, 1000);

// 3. 进一步优化时钟案例
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  // 生命周期-挂载
  componentDidMount() {
    this.timerId = setInterval(() => {
      this.formatDate()
    }, 1000)
  }
  // 生命周期-卸载
  componentWillUnmount() {
    clearInterval(this.timerId)
  }
  formatDate() {
    // 时刻更新时间数据
    this.setState({
      date: new Date()
    });
  }
  render() {
    return (
      <div>
        <h1>hello word</h1>
        <h1>it is { this.state.date.toLocaleTimeString() }</h1>
      </div>
    )
  }
};
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
)
